import React from "react";
import { Link } from "react-router-dom";
import Header from '../components/Header';
import Bottom from '../components/Bottom';
import './Helpcenter.css';
import Search from '../images/搜素.png';
import More from '../images/更多.png';
import Update from '../images/功能更新.png';
import Newface from '../images/新手指南.png';
import Book from '../images/高阶教程.png';

const Helpcenter = () => {
    return (
        <div className="helpcenter_box">
            <Header />
            <div className="hc_header">
                <div className="hc_header_title">
                    <div className="title_big">格物衍艺帮助中心</div>
                    <div className="title_small">有问题就找帮助中心</div>
                    <div className="hc_search">
                        <input type="text" className="search_text" />
                        <img src={Search} className="search_img" />
                    </div>
                </div>
                <div className="hc_header_img"></div>
            </div>
            <div className="hc_body">
                <div className="body_box">
                    <div className="body_title">快捷入口</div>
                    <div className="body_content">
                        <div>
                            <img src={Newface} />
                            <Link to='/helpdetail/helpcontent/guide_book'><span>新手指南</span></Link>
                        </div>
                        <div>
                            <img src={Book} />
                            <Link to='/helpdetail/helpcontent/recommendation'><span>高阶教程</span></Link>
                        </div>
                        <div>
                            <img src={Update} />
                            <Link to='/helpdetail/helpcontent/update_summary'><span>功能更新</span></Link>
                        </div>
                        <div>
                            <img src={More} />
                            <Link to='/helpdetail/helpcontent/about_website'><span>更多</span></Link>
                        </div>
                    </div>
                </div>
            </div>
            <Bottom />
        </div>
    )
}

export default Helpcenter;
